import { VAR } from "../introduce.js";

// $(document).ready(function () {
//   if (location.href.indexOf("#reloaded") == -1) {
//     location.href = location.href + "#reloaded";
//     location.reload();
//   }
// });
// function load() {
//   location.href = "../module04/phoneLogin.html";
// }
// load();

// setInterval(function () {
//   window.location.reload();
// }, 51000);
// (function () {
//   if ($.cookie("refresh") != "no") {
//     setTimeout(function () {
//       window.location.reload();
//       $.cookie("refresh", "no");
//     }, 1000);
//   }
// });

const usersData = [
  {
    tel: "18738309029",
    user: 12345678,
    password: "cyc123456",
    captcha: "123456", //验证码
  },
  {
    tel: "18738309028",
    user: 12345677,
    password: "cyc123456",
    captcha: "123456",
  },
];
window.onload = function () {
  //首页
  const goIn = "../module04/mainFunctionPage.html";
  if (location.href.indexOf("#reloaded") == -1) {
    location.href = location.href + "#reloaded";
    location.reload();
  }

  const phoneLogin = document.querySelector(".phoneLogin");
  const numberLogin = document.querySelector(".numberLogin");
  // 切换账号
  const number = document.querySelector(".phoneLogin .number");
  // 切换手机号
  const phone = document.querySelector(".numberLogin .phone");
  // 登录切换
  const login1 = document.querySelector(".login1 .btn");
  const form = document.querySelector("form");

  // 点击账号切换账号登录

  number.addEventListener("click", function () {
    // 点击账号手机号登录页面隐藏，账号登录页面显示
    // console.log(111);
    phoneLogin.style.display = "none";
    numberLogin.style.display = "block";
  });
  phone.addEventListener("click", function () {
    // 点击手机号账号登录页面隐藏，手机号登录页面显示
    phoneLogin.style.display = "block";
    numberLogin.style.display = "none";
  });
  // 手机号登录
  const fromphone = document.querySelector(".formphone");
  const phoneInput = document.querySelector(".info .wrapper .phone");
  const erroPhone = document.querySelector(".info .wrapper .erroPhone");
  // 封装函数
  let btnurl = goIn + `?tel=${phoneInput.value}`;
  // 手机号登录
  let flag1 = 0;
  let flag2 = 0;
  // 验证码默认为禁用
  const verify = document.querySelector(".phoneLogin .captcha .verify");
  verify.disabled = true;
  phoneInput.addEventListener("change", getphoneInput);
  function getphoneInput() {
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
    if (!reg.test(phoneInput.value)) {
      flag1 = 0;
      verify.disabled = true;
      if (flag1 === 0 || flag2 === 0) {
        login1.classList.remove("loginBan");
        login1.disabled = true;
      }
      login1.disabled = false;
      erroPhone.style.opacity = "1";
      return false;
    }
    flag1 = 1;
    verify.disabled = false;
    if (flag1 === 1 && flag2 === 1) {
      login1.classList.add("loginBan");
      login1.disabled = true;
    }
    erroPhone.style.opacity = "0";

    return true;
  }

  // 验证码验证
  const codeInput = document.querySelector(".captcha .code");

  const erroCode = document.querySelector(".erroCode");
  // 输入验证码

  codeInput.addEventListener("change", getcodeInput);
  function getcodeInput() {
    const reg = /^\d{6}$/;
    if (!reg.test(codeInput.value)) {
      flag2 = 0;
      if (flag1 === 0 || flag2 === 0) {
        login1.classList.remove("loginBan");
        login1.disabled = true;
      }
      console.log(+codeInput.value);
      erroCode.style.opacity = "1";
      return false;
    }
    erroCode.style.opacity = "0";
    flag2 = 1;
    if (flag1 === 1 && flag2 === 1) {
      login1.classList.add("loginBan");
      login1.disabled = false;
    }
    return true;
  }

  let sum = "";
  verify.addEventListener("click", getverifyCode);
  function getverifyCode() {
    let i = 10;
    verify.disabled = true;
    verify.innerHTML = `${i}秒后重新获取`;
    let timeId = setInterval(function () {
      i--;
      if (i < 0) {
        clearInterval(timeId);
        verify.disabled = false;
        verify.innerHTML = "获取验证码";
        return;
      }
      verify.innerHTML = `${i}秒后重新获取`;
    }, 1000);

    // for (let i = 0; i < 6; i++) {
    //   function getRandom(n, m) {
    //     return Math.floor(Math.random() * (m - n + 1)) + n;
    //   }
    //   //调用
    //   let random = getRandom(0, 9);
    //   sum += random;
    // }
    // alert(`验证码为：${sum}`);
  }
  // 点击按钮提交
  const login2 = document.querySelector(".login2 .btn");
  login2.addEventListener("click", function () {
    console.log(111);
  });
  // 阻止默认提交
  fromphone.addEventListener("submit", function (e) {
    if (!getphoneInput() && !getcodeInput()) {
      e.preventDefault();
    }
    e.preventDefault();
    console.log(111);
    usersData.push({ tel: phoneInput.value, captcha: codeInput.value });
    localStorage.setItem("loginUeser", JSON.stringify(usersData));
    location.href = btnurl;
    fromphone.reset();
    // 地址存放
  });

  // 账号密码登录
  const accountInput = document.querySelector(".numberLogin .account");
  // 账号有误
  const erroAccount = document.querySelector(".numberLogin .erroPhone");
  console.log(erroAccount);

  // 输入的密码
  const accountCodeInput = document.querySelector(".numberLogin .code");
  // 密码验证
  const erroCodeInput = document.querySelector(".numberLogin .erroCode");
  const eye = document.querySelector(".yanjing");
  let flag3 = 0;
  let flag4 = 0;
  accountInput.addEventListener("change", getaccountInput);
  function getaccountInput() {
    const reg = /^\w{9}$/;
    if (!reg.test(accountInput.value)) {
      flag3 = 0;
      if (flag3 === 0 || flag4 === 0) {
        login2.classList.remove("loginBan");
        login2.disabled = true;
      }
      erroAccount.style.opacity = "1";
      return false;
    }
    flag3 = 1;
    if (flag3 === 1 && flag4 === 1) {
      login2.classList.add("loginBan");
      login2.disabled = false;
    }
    erroAccount.style.opacity = "0";
    return true;
  }
  const dele = document.querySelector(".numberLogin .dele");
  // 输入密码
  accountCodeInput.addEventListener("change", getaccountCodeInput);
  function getaccountCodeInput() {
    const reg = /^[a-zA-Z0-9]{9}$/;
    if (!reg.test(accountCodeInput.value)) {
      flag4 = 0;
      if (flag3 === 0 || flag4 === 0) {
        login2.classList.remove("loginBan");
        login2.disabled = true;
      }
      erroCodeInput.style.opacity = "1";
      return false;
    }
    erroCodeInput.style.opacity = "0";
    flag4 = 1;
    if (flag3 === 1 && flag4 === 1) {
      login2.classList.add("loginBan");
      login2.disabled = false;
    }
    return true;
  }

  // 监测表单输入
  accountCodeInput.addEventListener("input", function () {
    if (accountCodeInput.value) {
      dele.style.opacity = "1";
      dele.addEventListener("click", function () {
        accountCodeInput.value = "";
      });
    } else {
      dele.style.opacity = "0";
    }
  });
  let flag = false;
  eye.addEventListener("click", function () {
    flag = !flag;
    if (flag) {
      eye.classList.add("active");
      accountCodeInput.type = "text";
    } else {
      eye.classList.remove("active");
      accountCodeInput.type = "password";
    }
  });
  // 提交
  const formnumber = document.querySelector(".formnumber");
  formnumber.addEventListener("submit", function (e) {
    e.preventDefault();
    if (!getaccountInput()) e.preventDefault();
    if (!getaccountCodeInput()) e.preventDefault();
    // 地址存放
    usersData.push({
      user: accountInput.value,
      password: accountCodeInput.value,
    });
    localStorage.setItem("loginUeser", JSON.stringify(usersData));
    location.href = btnurl;
    formnumber.reset();
  });
};
